<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
// 修改退出游戏弹窗样式
.el-message-box__wrapper  .el-message-box{
  width: 50%;
}
.line{
  border: none !important;
}
@media screen and (max-width: 769px){
  .el-container{
    display: block !important;
  }
  .home-main{
    padding: 20px 1vw;
  }
  // 头部服务器连接样式
  .el-header{
    position: fixed;
    top: 2px;
    left: 0;
    padding: 0  !important;
    z-index: 99;
    width: 100vw;
    background: white;
  }
  // 设置用户列表块
  .home-main-container{
    display: block;
    margin-top: 30px;
    .left-panel-container{
      // position: absolute;
      box-sizing: border-box;
      width: 100vw !important;
      .left-panel {
        padding: 28px 2px 5px !important;
        width: 100% !important;
      }
    }
  }
  .is-always-shadow  .el-card__body{
    padding: 0;
  }

  // 用户列表样式
  .participants{
    display: flex;
    flex-wrap: wrap;
    >li{
      margin-right: 8px;
      margin: 5px 4px;
      .profile{
        font-size: 0;
      }
    }
    .el-avatar{
      width: 25px;
      height: 25px;
      img{
        width: 100%;
      }
    }
  }
  .el-badge .el-button--small{
    padding: 5px;
  }

  // 用户选择按钮样式
  .button-area{
    position: fixed;
    top: -8px;
    right: 0;
    margin-top: 0;
    z-index: 100;
    .el-button{
      padding: 9px;
    }
  }

  // 绘图box
  .canver-container{
    height: 30vh;
  }
  .main{
    padding: 5px 0 !important;
  }

  // 绘图按钮选择颜色
  .select{
    display: flex;
    justify-content: space-around !important;
    flex-wrap: wrap;
    .el-col{
      width: 18%;
      max-height: 28px;
    }
  }
  .profile .el-avatar img{
    width: 100%;
  }

  // 聊天群适配
  .chat_room{
    margin-top: 5px;
    .el-card__header{
      padding: 4px 20px;
    }
    .text-item-container{
      .text_item{
        height: 150px !important;
      }
    }
  }
  .input_container{
    height: 100px !important;
    .input_text{
      height: 50px !important;
    }
    .send_btn{
      .el-button{
        padding: 4px 8px
      }
    }
  }

  .is-always-shadow{
    .panel-area{
      margin: 5px 0 !important;
    }
  }
}
</style>
